<template>
  <el-main v-if="hotel">
    <el-row>
      <el-col :span="18" :offset="3">
        <!--        <h2>{{ hotel.name }}</h2>-->
        <!--        <p>{{ hotel.address }}</p>-->
        <el-carousel height="400px">
          <el-carousel-item v-for="(item, index) in RentalDetailsVo[0].images" :key="index">
            <img :src="dialogImageUrl + item" alt="Hotel image" style="width: 100%; height: 100%">
          </el-carousel-item>
        </el-carousel>
        <h3>汽车详情</h3>
        <el-table :data="RentalDetailsVo" style="width: 100%" stripe>
          <el-table-column prop="carBrand" label="品牌" width="80">
          </el-table-column>
          <el-table-column prop="carName" label="车名" width="80">
          </el-table-column>
          <el-table-column prop="carType" label="类型" width="80">
          </el-table-column>
          <el-table-column prop="doors" label="车门数" width="80">
          </el-table-column>
          <el-table-column prop="drivingStyle" label="车辆排挡" width="80">
          </el-table-column>
          <el-table-column prop="seats" label="座位数" width="80">
          </el-table-column>
          <el-table-column prop="price" label="日均单价" width="80">
          </el-table-column>
          <el-table-column prop="TotalPrice" label="总价" width="80">
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button size="small" @click="bookRoom(scope.row)">预订</el-button>
            </template>
          </el-table-column>
        </el-table>
        <h3>公司介绍------------------------------------------------------------------------</h3>
        <p>公司名称：{{ RentalDetailsVo[0].name }} </p>
        <p>营业时间：{{ RentalDetailsVo[0].businessTime }}</p>
        <p>地址：{{ RentalDetailsVo[0].address }}</p>
      </el-col>

    </el-row>
    <el-form :model="driverInfo" label-width="100px" style="margin-top: 20px;">
      <el-row>
        <el-col :span="8">
          <el-form-item label="驾驶员姓名">
            <el-input v-model="driverInfo.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="联系电话">
            <el-input v-model="driverInfo.phone"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身份证号">
            <el-input v-model="driverInfo.idCard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-main>
</template>
<script>
import axios from "axios";

let gateway = 'http://www.localhost:8232/rentcar/rentcar';
let alipay = 'http://www.localhost:9090/alipay/alipay';
export default {
  name: 'RentalCarsDetail',
  data() {
    return {
      OrderNumber: '',//订单号
      TotalAmount: 0,
      TradeName: '',
      //司机信息
      driverInfo: {
        name: '', //名字
        phone: '', //手机号
        idCard: '' //身份证
      },
      dialogImageUrl: 'http://rufnvmzv0.bkt.clouddn.com/',
      RentalDetailsVo: [],
      carCompanyId: 0, //上个页面传过来的租车公司id
      carId: 0, //上个页面传过来的车id
      rentalDays: 0, //上个页面传过来的天数
      searchForm: { //上个页面传过来的地点等参数 中间有具体的开始时间以及结束时间
        pickupCity: '',
        returnCity: '',
        pickupLocation: '',
        returnLocation: '',
        rentalDateRange: null
      },
      totalprice: 0, //上个页面传过来的单价
      hotel: {},
    };
  },

  methods: {
    //计算总价
    calculateTotalPrice(item) {
      // 假设按照七天计算总价
      this.RentalDetailsVo.forEach(item => {
        item.TotalPrice = item.price * this.rentalDays
      })
    },
    bookRoom(room) {
      // 这里可以跳转到预订页面
      console.log("预订房间", room);
      //先判断是否填写驾驶员信息  没有填写的话就不让预定
      if (!this.driverInfo.name || !this.driverInfo.phone || !this.driverInfo.idCard) {
        // 提示驾驶员信息不完整
        this.$message.error('请填写完整的驾驶员信息');
        return;
      }
      //调用生成订单的方法
      this.GenerateAnOrder(room);
      //调用支付
    },
    //加载当前选中的汽车公司以及 当前汽车的详细信息
    VehiclesAndCompanies() {
      //取出上个页面带过来的值
      this.carCompanyId = this.$route.params.carCompanyId; //租车公司id
      this.carId = this.$route.params.carId; //汽车id
      this.rentalDays = this.$route.params.rentalDays; //选择的租车天数
      this.searchForm = this.$route.params.searchForm; //这里是地点等参数
      this.totalprice = this.$route.params.Totalprice; //这个是单价  后面得将单价和天数乘起来
      console.log(this.carCompanyId)
      console.log(this.carId)
      console.log(this.rentalDays)
      console.log(this.searchForm)
      console.log(this.totalprice)
      //调用后台根据租车公司查询车辆的方法
      axios({
        url: gateway + '/carPackage/RentalDetails',
        method: 'get',
        params: {
          carId: this.carId,
          carCompanyId: this.carCompanyId
        }
      }).then(response => {
        console.log(response)
        this.RentalDetailsVo.push(response.data);
        this.calculateTotalPrice();
      })
    },
    ////调用订单方法  生成一个订单 后面调用支付
    GenerateAnOrder(room) {
      let carId = this.carId; //汽车id
      let carCompanyId = this.carCompanyId; //租车公司id
      let Company = room.name;  //租车公司名字
      let carName = room.carName;//汽车名字
      let carType = room.carType;//汽车类型
      let seats = room.seats;//汽车座位数量
      let doors = room.doors;//汽车车门数量
      let drivingStyle = room.drivingStyle;//汽车排挡
      let engineCapacity = room.engineCapacity;//汽车排量
      let carBrand = room.carBrand;//汽车品牌
      let price = room.price; //单价
      let pickupCity = this.searchForm.pickupCity; //租车城市
      let pickupLocation = this.searchForm.pickupLocation; //取车城市 具体地点
      let returnCity = this.searchForm.returnCity; //还车城市
      let returnLocation = this.searchForm.returnLocation; //还车城市具体地点
      let rentalDateRange = this.searchForm.rentalDateRange[0]; //租车开始时间
      let rentalDateRange1 = this.searchForm.rentalDateRange[1]; //租车结束时间
      let rentalDays = this.rentalDays; //租车天数
      let driver = this.driverInfo.name; //驾驶员名字
      let phone = this.driverInfo.phone; //驾驶员手机号
      let idCard = this.driverInfo.idCard; //驾驶员身份证号
      let orderNumber = this.OrderNumber;

      console.log(Company);
      //生成订单方法
      axios({
        url: gateway + '/carPackage/AutomobileOrder',
        method: 'post',
        data: {
          carId,
          carCompanyId,
          carName,
          carType,
          seats,
          doors,
          drivingStyle,
          engineCapacity,
          carBrand,
          pickupCity,
          pickupLocation,
          returnCity,
          returnLocation,
          rentalDateRange,
          rentalDateRange1,
          rentalDays,
          driver,
          phone,
          idCard,
          price,
          Company,
          orderNumber
        }
      }).then(response => {
        console.log(response)
        //这里得赋值 订单号
        if (response.code !== 200) {
          this.$message.error('订单异常，回到主页从新租车');
        } else {
          //定义三个值  给这三个值赋值
          //     OrderNumber: '',//订单号
          //     TotalAmount: 0,
          //     TradeName: '',

        }
      })
      //调支付
      // if (response.code === 200) {
      axios({
        url: alipay + '/alipay/pay',
        method: 'get',
        params: {
          orderId: this.OrderNumber,
          totalPrice: this.TotalAmount,
          subject: this.TradeName
        }
      }).then(response => {

      })
      // } else {
      //   this.$message.error('订单异常，回到主页从新租车');
      // }

    },
    //生成订单号
    ObtainOrderNumber() {
      axios({
        url: gateway + '/order/carPackage/ObtainOrderNumber',
        method: 'get',
      }).then(response => {
        console.log(response)
        this.OrderNumber = response.data;
      })
    }
  },
  created() {
    //页面一加载调用
    this.VehiclesAndCompanies();
    //获取订单号
    this.ObtainOrderNumber();
  },
}
</script>
<style scoped lang="less">
.search-form {
  margin-bottom: 20px;
}
</style>